<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/jquery-sinaEmotion-2.1.0.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-1 column">
            </div>
            <div class="col-md-6 column">
                <div class="thumbnail">
                    <div class="caption" id="dialog"></div>
                </div>
                <form onsubmit="onSubmit(); return false;">
                    <select style="margin-bottom:8px" id="client_list">
                        <option value="all">所有人</option>
                    </select>
                    <textarea class="textarea thumbnail" id="textarea"></textarea>
                    <div class="say-btn">
                        <input type="button" class="btn btn-default face pull-left" value="表情" />
                        <input type="submit" class="btn btn-default" value="发表" />
                    </div>
                </form>
                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;<b>房间列表:</b>（当前在&nbsp;房间<?php echo isset($_GET['room_id'])&&intval($_GET['room_id'])>0 ? intval($_GET['room_id']):1; ?>）<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="/?room_id=1">房间1</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="/?room_id=2">房间2</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="/?room_id=3">房间3</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="/?room_id=4">房间4</a>
                    <br><br>
                </div>
            </div>
            <div class="col-md-3 column">
                <div class="thumbnail">
                    <div class="caption" id="userlist"></div>
                </div>
                <a href="http://workerman.net:8383" target="_blank"><img style="width:252px;margin-left:5px;" src="/img/workerman-todpole.png"></a>
            </div>
        </div>
    </div>
    <script>
        var ws, name, client_list={};
        function keepalive(ws) {
            var time = new Date();
            if (last_health != -1 && (time.getTime() - last_health > health_timeout)) {
                //连接断开，可设置重连或者关闭连接
                console.log('服务器没有响应')
            
                //ws.close();
            } else {

                console.log('连接正常')
                // if (ws.bufferedAmount == 0) {
                //     ws.send('~H#C~');
                // }
            }
        }

        function header(ws){
            ws.send({'ctl':'header','act':'check'})
            console.log('监听心跳')
        }
        // 连接服务端
        function connect(url) {
            // 创建websocket
            ws = new WebSocket(url);
            // 当socket连接打开时，输入用户名
            ws.onopen = onopen;
            // 当有消息时根据消息类型显示不同信息
            ws.onmessage = onmessage; 
            ws.onclose = function() {
                console.log("连接关闭，定时重连");
                connect(url);
            };
            ws.onerror = function() {
                console.log("出现错误");
            };
        }
        // 连接建立时发送登录信息
        function onopen()
        {
            if(!name)
            {
                show_prompt();
            }
            // 登录
            var login_data = '{"ctl":"login","client_name":"'+name.replace(/"/g, '\\"')+'","room_id":"1"}';
            console.log("websocket握手成功，发送登录数据:"+login_data);
            ws.send(login_data);
        }
        // 输入姓名
        function show_prompt(){  
            name = prompt('输入你的名字：', '');
            if(!name || name=='null'){  
                name = '游客';
            }
        }  

        

        connect("ws://127.0.0.1:9580/echo");

　　</script>
</body>
</html>